import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  Keyboard,
} from 'react-native';
import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {NormalHeader} from '../../components/NavigationHeader';
import {showToast} from '../../components/Toast';
import {userLogout} from '../../redux/action';
import {queryItemsList} from '../../api/auction';
import {CachedImage} from 'react-native-img-cache';

class ItemList extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      nfts: [],
    };
  }

  componentDidMount() {
    this.getList();
  }

  getList = () => {
    queryItemsList({
      userToken: this.props.userInfo.token,
      address: this.props.userInfo.metamaskAddress,
      size: 999,
    })
      .then((res) => {
        let newNfts = res.data.rows.map((item) => {
          return {
            ...item,
            img: item.image,
          };
        });
        console.log('nft列表');
        console.log(newNfts);

        this.setState({
          nfts: newNfts,
        });
      })
      .catch((err) => {
        console.log(err);

        showToast(err.msg || 'failed');
      });
  };

  renderComponent = () => {
    let newNtfs = [...this.state.nfts];
    return (
      <View style={{flex: 1, backgroundColor: '#160231'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Select"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />
        <View style={{padding: 20}}>
          <View
            style={{
              flexDirection: 'row',
              marginTop: 10,
              marginBottom: 80,
              flexWrap: 'wrap',
              justifyContent: 'flex-start',
            }}>
            {newNtfs.map((item) => (
              <TouchableOpacity
                style={{
                  flexDirection: 'column',
                  paddingLeft: 4,
                  paddingRight: 4,
                  width: '33.3%',
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: 20,
                }}
                key={item.itemId}
                onPress={() => {
                  //   this.props.navigation.navigate('AuctionSet');
                }}>
                <CachedImage
                  style={{
                    width: 100,
                    height: 100,
                    borderRadius: 50,
                    marginBottom: 10,
                  }}
                  cache={'force-cache'}
                  source={{uri: item.img}}></CachedImage>
                <Text>{item.name}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
  widgetLayout: state.Layout.widgetLayout,
});

const mapDispatchToProps = (dispatch) => ({
  userLogout: (item) => dispatch(userLogout()),
});

export default connect(mapStateToProps, mapDispatchToProps)(ItemList);
